<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仪表盘 - 列车车次管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">            <div class="position-sticky pt-3">
                <div class="text-center mb-4">
                    <img src="/images/logo.jpeg" alt="Logo" class="sidebar-logo">
                    <h4>列车车次管理系统</h4>
                    <h6 class="text-muted">管理员控制台</h6>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="/admin/dashboard.html">
                            <i class="bi bi-speedometer2 me-2"></i>
                            仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/users.html">
                            <i class="bi bi-people me-2"></i>
                            用户管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/trains.html">
                            <i class="bi bi-train-front me-2"></i>
                            列车管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/stations.html">
                            <i class="bi bi-building me-2"></i>
                            车站管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/routes.html">
                            <i class="bi bi-map me-2"></i>
                            路线管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/schedules.html">
                            <i class="bi bi-calendar-date me-2"></i>
                            时刻表管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/tickets.html">
                            <i class="bi bi-ticket-perforated me-2"></i>
                            票务管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/">
                            <i class="bi bi-house-door me-2"></i>
                            返回前台
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="logoutBtn">
                            <i class="bi bi-box-arrow-right me-2"></i>
                            退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 主内容区 -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">仪表盘</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">导出报表</button>
                    </div>
                </div>
            </div>

            <!-- 概览卡片 -->
            <div class="row">
                <div class="col-md-3 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                        总用户数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalUsers">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="bi bi-people-fill fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 mb-4">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        总列车数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalTrains">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="bi bi-train-front fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        今日车次</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="todaySchedules">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="bi bi-calendar-date fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 mb-4">
                    <div class="card border-left-warning shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                        今日票数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="todayTickets">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="bi bi-ticket-perforated fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动和统计 -->
            <div class="row">
                <div class="col-md-8">
                    <div class="card mb-4">
                        <div class="card-header">
                            最近票务活动
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>票号</th>
                                        <th>用户</th>
                                        <th>车次</th>
                                        <th>时间</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody id="recentTickets">
                                    <tr>
                                        <td colspan="5" class="text-center">加载中...</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            系统通知
                        </div>
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <span class="badge bg-warning me-2">注意</span>
                                    系统将于本周日进行升级维护，请提前做好准备工作。
                                </li>
                                <li class="list-group-item">
                                    <span class="badge bg-success me-2">新功能</span>
                                    座位分配算法已更新，现在支持更智能的座位推荐。
                                </li>
                                <li class="list-group-item">
                                    <span class="badge bg-info me-2">提示</span>
                                    请记得定期备份数据库，确保数据安全。
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/js/admin.js"></script>
<script>
    $(document).ready(function() {
        // 检查用户是否为管理员
        $.ajax({
            url: '/api/users/current',
            type: 'GET',
            success: function(user) {
                if (user.userRole !== 'ADMIN') {
                    alert('您没有管理员权限');
                    window.location.href = '/';
                } else {
                    loadDashboardData();
                }
            },
            error: function() {
                alert('请先登录');
                window.location.href = '/custom-login?redirect=' + encodeURIComponent(window.location.href);
            }
        });

        $('#logoutBtn').on('click', function(e) {
            e.preventDefault();
            $.ajax({
                url: '/logout',
                type: 'POST',
                success: function() {
                    window.location.href = '/custom-login';
                }
            });
        });
    });

    function loadDashboardData() {
        // 加载总用户数
        $.ajax({
            url: '/api/users',
            type: 'GET',
            success: function(users) {
                $('#totalUsers').text(users.length);
            },
            error: function() {
                $('#totalUsers').text('获取失败');
            }
        });

        // 加载总列车数
        $.ajax({
            url: '/api/trains',
            type: 'GET',
            success: function(trains) {
                $('#totalTrains').text(trains.length);
            },
            error: function() {
                $('#totalTrains').text('获取失败');
            }
        });

        // 加载今日车次
        const today = new Date().toISOString().split('T')[0];
        $.ajax({
            url: `/api/schedules?date=${today}`,
            type: 'GET',
            success: function(schedules) {
                $('#todaySchedules').text(schedules.length);
            },
            error: function() {
                $('#todaySchedules').text('获取失败');
            }
        });

        // 加载今日票数
        $.ajax({
            url: '/api/tickets',
            type: 'GET',
            success: function(tickets) {
                const todayTickets = tickets.filter(ticket => {
                    return ticket.createTime && ticket.createTime.startsWith(today);
                });
                $('#todayTickets').text(todayTickets.length);

                // 加载最近票务活动
                loadRecentTickets(tickets.slice(0, 10)); // 只显示最近10条
            },
            error: function() {
                $('#todayTickets').text('获取失败');
                $('#recentTickets').html('<tr><td colspan="5" class="text-center">获取失败</td></tr>');
            }
        });
    }

    function loadRecentTickets(tickets) {
        if (!tickets || tickets.length === 0) {
            $('#recentTickets').html('<tr><td colspan="5" class="text-center">暂无票务活动</td></tr>');
            return;
        }

        let html = '';
        tickets.forEach(ticket => {
            // 格式化日期
            const date = new Date(ticket.createTime).toLocaleString();

            // 状态标签颜色
            let statusBadge = 'bg-success';
            if (ticket.status === 'CANCELLED') {
                statusBadge = 'bg-danger';
            } else if (ticket.status === 'PENDING') {
                statusBadge = 'bg-warning';
            }

            html += `
                    <tr>
                        <td><a href="/admin/tickets.html?id=${ticket.id}">${ticket.ticketNumber}</a></td>
                        <td>${ticket.userId}</td>
                        <td>${ticket.scheduleId}</td>
                        <td>${date}</td>
                        <td><span class="badge ${statusBadge}">${ticket.status}</span></td>
                    </tr>
                `;
        });

        $('#recentTickets').html(html);
    }
</script>
</body>
</html>